<template>
  <div class="create-themes">
    <mu-dialog
      dialog-class="create-themes-info"
      width="492"
      :overlay-close="false"
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
      transition="scale"
      :open.sync="themesDialog"
    >
      <div class="themes-info-head">
        <strong class="title"> 新建主题 </strong>
        <div class="fork">
          <img
            src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG"
            @click="changeThemesDialog"
          />
        </div>
      </div>
      <mu-form :model="themes">
        <mu-form-item>
          <mu-text-field
            class="create-themes-field"
            label="主题名称"
            v-model="themes.themesName"
            label-float
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item v-if="root === 1">
          <div class="date">
            <strong class="name"> 时间： </strong>
            <div class="start-time date-time">
              <mu-date-input
                v-model="themes.startTime"
                type="dateTime"
                full-width
                landscape
                solo
              ></mu-date-input>
              <div class="date-tips">
                <img
                  src="https://image.xuexiwangzhe.com/FqJ5djC8gVNgpT0P7555DOI1Y-0p"
                />
                <span v-if="!themes.startTime">开始时间</span>
              </div>
            </div>
            <div class="date-to">-</div>
            <div class="end-time date-time">
              <mu-date-input
                v-model="themes.endTime"
                type="dateTime"
                full-width
                landscape
                solo
              ></mu-date-input>
              <div class="date-tips">
                <img
                  src="https://image.xuexiwangzhe.com/FmeB9k1IJGquh3fPE_TYpJn71905"
                />
                <span v-if="!themes.endTime">结束时间</span>
              </div>
            </div>
          </div>
        </mu-form-item>
      </mu-form>
      <div class="create-themes-footer">
        <mu-button
          class="create-themes-cancel"
          color="#ffffff"
          round
          @click="changeThemesDialog"
        >
          取消
        </mu-button>
        <mu-button
          class="create-themes-botton"
          color="#265CFF"
          :disabled="!nextStep"
          round
          @click="next"
        >
          下一步
        </mu-button>
      </div>
    </mu-dialog>

    <themes-select-type ref="themesSelectType"></themes-select-type>
  </div>
</template>

<script>
import themesSelectType from "./themesSelectType";

export default {
  props: {
    root: {
      typeof: Number | String,
      default: 1,
    },
  },
  components: {
    themesSelectType
  },
  computed: {
    nextStep() {
      return !!(
        this.themes.themesName &&
        this.themes.startTime &&
        this.themes.endTime
      );
    },
  },
  data() {
    return {
      themesDialog: false,
      themes: {
        themesName: "",
        startTime: "",
        endTime: "",
      },
    };
  },
  methods: {
    changeThemesDialog() {
      this.themesDialog = !this.themesDialog;
    },
    next() {
      this.changeThemesDialog();
      this.$refs.themesSelectType.changeThemesTypeDialog();
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .create-themes-info {
  border-radius: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .mu-dialog-body {
    padding: 27px 30px 30px 30px;
    color: #333333;

    .mu-form-item {
      margin-bottom: 0;
    }
  }

  .themes-info-head {
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    color: #333333;

    .fork img {
      width: 13.5px;
      height: 13.5px;
      cursor: pointer;
    }
  }

  .create-themes-name {
    width: 100%;
  }

  .date {
    display: flex;
    align-items: center;
    .date-to {
      width: 24px;
      text-align: center;
      line-height: 30px;
      position: relative;
      left: 10px;
      color: #999999;
    }
    .date-time {
      position: relative;
    }
    .date-tips {
      position: absolute;
      left: 22px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: #999;
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
        position: relative;
        top: 2px;
      }
    }
  }
  .date .mu-input {
    margin-left: 12px;
    height: 30px;
    min-height: auto;
    border: 1px solid #cccccc;
    border-radius: 15px;
    position: relative;
    z-index: 1;
    i {
      left: 3px;
      top: 50%;
      transform: translateY(-50%) scale(0.7);
    }
    input {
      font-size: 12px;
      padding-left: 28px;
      width: 164px;
      min-width: 128px;
      cursor: pointer;
    }
  }

  .create-themes-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
  }
  .create-themes-botton {
    width: 120px;
    height: 30px;
    box-shadow: none;
    margin-left: 21px;
  }
  .create-themes-cancel {
    color: #666666;
    border: 1px solid #666666;
    width: 120px;
    height: 30px;
    box-shadow: none;
  }
  .mu-raised-button.disabled.disabled {
    color: #ffffff;
  }
}
</style>